<template>
     <h2>归还图书</h2>
    <br>  
    <div class="form">
      <el-form
        :model="returnBook"
        status-icon
        class="demo-ruleForm"
      >
        <el-form-item label="借阅证号">
          <el-input class="input" v-model="returnBook.ReaderID" autocomplete="off" />
        </el-form-item>
        <el-form-item class="input" label="图书ISBN">
          <el-input
            v-model="returnBook.ISBN"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmReturn(returnBook)"
            >还书</el-button
          >
          <el-button  @click="reset"
            >重置</el-button
          >
        </el-form-item>
    </el-form>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import BookService from "../../stores/BookService";

const returnBook = reactive({
    ReaderID: '',
    ISBN: '',
})

const confirmReturn=async (rtB) => {

  const [err, res] = await BookService.promise_process(BookService.returnBook(rtB))
    if(err){
      console.log(err)
      ElMessageBox.alert("请求服务器失败", '提示', {
          type : 'error',
          confirmButtonText: 'OK',
      })
    }
    if(res){
        if(res.msg == '还书成功'){
            ElMessage({
            message: res.msg,
            type: "success",
            });
            reset()
         }else{
            ElMessage({
            message: res.msg,
            type: "warning",
        });
    }
  }
}

const reset = () =>{
  returnBook.ISBN = ''
  returnBook.ReaderID = ''
}
</script>


<style scoped>
  .form {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  text-align:left; margin: 0 auto;width:50%;
}
.input {
  width: 80%
}
</style>